/*
    webpack.config.js: webpack 的配置文件。指示 webpack 干那些活（当运行 webpack 指令时，会加载里面的配置）
        注意：所有构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs.
    
*/ 

// resolve 用了拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
    // webpack 配置五个概念(entry, output, loader, )

    // 1. 入口起点
    entry: './src/index.js', 

    // 2. 输出
    output: {
        // 输出文件名
        filename: 'build.js',
        // 输出路径，一般写绝对路径，所以要引入一个 path
        path: resolve(__dirname, 'build'), // __dirname 是 nodejs 变量，代表当前文件的绝对根路径，输出到 build 下面去
    },

    // 3. loader 的配置（翻译）
    module: {
        rules: [
            // 详细的 loader 配置

            // 配置 css 的 loader
            {
                // 匹配那些文件
                test: /\.css$/,
                // 使用那些 loader 进行处理
                use: [ // use 数组中 loader 执行顺序：从左到右，从下到上依次执行
                    // 创建 style 标签，将 Js 中的样式资源插入进去，添加到 head中生效
                    'style-loader',
                    // 将 css 文件变成 commonjs 模块加载 Js 中，里面内容是样式字符串
                    'css-loader'
                ]
            },

            // 配置 less 的 loader
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将 less 文件编译成 css 文件
                    // 需要下载 less 和 less-loader
                    'less-loader'
                ]
            }
        ]
    },

    // 4. plugins 插件
    plugins: [
        // 详细 plugins 配置
    ],

    // 5. 模式
    mode: 'development', // 开发环境，不压缩代码
    // mode: 'production',  // 生产环境，压缩代码
}